<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>端口映射</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <style type="text/css">
      fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver;}
      legend{padding:.5em;border:0;width:auto;}
    </style>
  </head>
  <body>
    <ul class="nav nav-tabs" style="margin-bottom:5px;">
      <li name="localAccessRemoteItem" role="presentation" class="active"><a href="#">本地访问远程</a></li>
      <li name="remoteAccessLocalItem" role="presentation"><a href="#">远程访问本地</a></li>
    </ul>

  	<form class="form-inline" id="localAccessRemoteForm">
      <fieldset>
        <legend>SSH登录信息</legend>
        <div class="form-group">
          <label>SSH主机</label>
          <input name="sshHost" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label>SSH端口</label>
          <input name="sshPort" type="text" class="form-control" value="22" />
        </div>
        <div class="form-group">
          <label>SSH用户名</label>
          <input name="sshUser" type="text" class="form-control" />
        </div>
      </fieldset>
      <fieldset>
        <legend>映射信息</legend>
        <div class="form-group">
          <label>远程主机</label>
          <input name="remoteHost" type="text" class="form-control" value="127.0.0.1" />
        </div>
        <div class="form-group">
          <label>远程端口</label>
          <input name="remotePort" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label>本地端口</label>
          <input name="localPort" type="text" class="form-control" />
        </div>
      </fieldset>
  		<div class="form-group" style="margin-top:10px;">
  		    <label></label>
  		    <button id="localAccessRemoteHandleBtn" type="button" class="btn btn-primary">开启</button>
          <span name="helpBlock" class="help-block"></span>
  		</div>
  	</form>

    <form class="form-inline" id="remoteAccessLocalFrom" style="display: none;">
      <fieldset>
        <legend>SSH登录信息</legend>
        <div class="form-group">
          <label>SSH主机</label>
          <input name="sshHost" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label>SSH端口</label>
          <input name="sshPort" type="text" class="form-control" value="22" />
        </div>
        <div class="form-group">
          <label>SSH用户名</label>
          <input name="sshUser" type="text" class="form-control" />
        </div>
      </fieldset>
      <fieldset>
        <legend>映射信息</legend>
        <div class="form-group">
          <label>本地主机</label>
          <input name="localHost" type="text" class="form-control" value="127.0.0.1" />
        </div>
        <div class="form-group">
          <label>本地端口</label>
          <input name="localPort" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label>远程端口</label>
          <input name="remotePort" type="text" class="form-control" />
        </div>
      </fieldset>
      <div class="form-group" style="margin-top:10px;">
          <label></label>
          <button id="remoteAccessLocalHandleBtn" type="button" class="btn btn-primary">开启</button>
          <span name="helpBlock" class="help-block"></span>
      </div>
    </form>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript" src="../../js/fileinput.js"></script>
    <script type="text/javascript">
        $("li[name='localAccessRemoteItem']").click(function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
            $("#remoteAccessLocalFrom").hide();
            $("#localAccessRemoteForm").show();
        });

        $("li[name='remoteAccessLocalItem']").click(function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
            $("#localAccessRemoteForm").hide();
            $("#remoteAccessLocalFrom").show();
        });

        $("#localAccessRemoteForm").on('change blur',
            "input[name='remoteHost'],input[name='remotePort'],input[name='localPort']",
            function(){
              var form=$(this).parents('form');
              var remoteHost=form.find("input[name='remoteHost']").val();
              var remotePort=form.find("input[name='remotePort']").val();
              var localPort=form.find("input[name='localPort']").val();

              form.find("span[name='helpBlock']").text(`即将创建通过本地端口【${localPort}】访问远程主机【${remoteHost}:${remotePort}】的隧道。`);
            });

        $("#remoteAccessLocalFrom").on('change blur',
            "input[name='localHost'],input[name='localPort'],input[name='remotePort']",
            function(){
              var form=$(this).parents('form');
              var localHost=form.find("input[name='localHost']").val();
              var localePort=form.find("input[name='localPort']").val();
              var remotePort=form.find("input[name='remotePort']").val();

              form.find("span[name='helpBlock']").text(`即将创建通过远程端口【{remotePort}】访问远程主机【${localHost}:${localePort}】的隧道。`);
            });

        $("#localAccessRemoteHandleBtn").click(function(){
            var form=$(this).parents('form');
            var sshHost=form.find("input[name='sshHost']").val();
            var sshPort=form.find("input[name='sshPort']").val();
            var sshUser=form.find("input[name='sshUser']").val();
            var remoteHost=form.find("input[name='remoteHost']").val();
            var remotePort=form.find("input[name='remotePort']").val();
            var localPort=form.find("input[name='localPort']").val();

            var cmd=`ssh -C -N -g -v -L ${localPort}:${remoteHost}:${remotePort} ${sshUser}@${sshHost} -p ${sshPort}`;
            window.top.app.run(`gnome-terminal -e "${cmd}"`);
        });

        $("#remoteAccessLocalHandleBtn").click(function(){
            var form=$(this).parents('form');
            var sshHost=form.find("input[name='sshHost']").val();
            var sshPort=form.find("input[name='sshPort']").val();
            var sshUser=form.find("input[name='sshUser']").val();
            var localHost=form.find("input[name='localHost']").val();
            var localePort=form.find("input[name='localPort']").val();
            var remotePort=form.find("input[name='remotePort']").val();

            var cmd=`ssh -C -f -N -g -R ${remotePort}:${localHost}:${localePort} ${sshUser}@${sshHost} -p ${sshPort}`;
            window.top.app.run(`gnome-terminal -e "${cmd}"`);
        });
    </script>
  </body>
</html>
